<template>
	<view class="page_passWord">
		<view class="list">
			<view class="item">
				<input :password="showPassword" clearable v-model="parmas.newPwd01" placeholder="请输入新密码" :maxLength="12"
					@input="eyeInput"></input>
				<text class="uni-icon" v-if="showEyeIcon" :class="[!showPassword ? 'uni-eye-active' : '']"
					@click="changePassword">&#xe568;</text>
			</view>
			<view class="item">
				<input :password="showPasswordT" clearable v-model="parmas.newPwd" placeholder="请输入新密码" :maxLength="12"
					@input="eyeInputT"></input>
				<text class="uni-icon" v-if="showEyeIconT" :class="[!showPasswordT ? 'uni-eye-active' : '']"
					@click="changePasswordT">&#xe568;</text>
			</view>
		</view>
		<view class="tips">密码长度为6-12位，可由数字、字母组成，字母区分大小写</view>
		<view class="onClick" @click="onClick">确认添加</view>
		<uni-popup ref="popup" type="message">
			<uni-popup-message type="success" message="密码添加成功" :duration="2000"></uni-popup-message>
		</uni-popup>
	</view>
</template>

<script>
	import graceChecker from '@/common/graceChecker.js'
	import formRuleConfig from '@/config/formRule.config.js'
	import AES from "@/common/AES.js"
	import {
		mapState
	} from "vuex";
	export default {
		data() {
			return {
				showEyeIcon: false,
				showPassword: true,
				showEyeIconT: false,
				showPasswordT: true,
				parmas: {
					newPwd01: "",
					newPwd: ""
				}
			}
		},
		computed: {
			...mapState(["userInfo"]),
		},
		methods: {
			eyeInput(e) {
				if (e.detail.value.length > 0) {
					this.showEyeIcon = true;
				} else {
					this.showEyeIcon = false;
					this.showPassword = true;
				}
			},
			changePassword() {
				this.showPassword = !this.showPassword;
			},
			eyeInputT(e) {
				if (e.detail.value.length > 0) {
					this.showEyeIconT = true;
				} else {
					this.showEyeIconT = false;
					this.showPasswordT = true;
				}
			},
			changePasswordT() {
				this.showPasswordT = !this.showPasswordT;
			},
			onClick() {
				let that = this;
				let checkRes = graceChecker.check(this.parmas, formRuleConfig.passWordRuleNew);
				if (!checkRes) {
					uni.showToast({
						title: graceChecker.error,
						icon: "none"
					});
					return;
				}
				if (this.parmas.newPwd01 === this.parmas.newPwd) {
					//开始AES加密
					let keys = getApp().globalData.key;
					let enUsername = AES.encrypt(that.parmas.newPwd01, keys);
					let encrypts = {};
					encrypts.loginPass = enUsername;
					that.$api.updatePass(encrypts).then(res => {
						if (res.data.code == 200) {
							uni.showToast({
								title: "密码添加成功",
								icon: "none"
							});
							let userObj = JSON.parse(JSON.stringify(that.userInfo))
							userObj.isPass = true;
							that.$store.commit("SET_USERINFO", userObj);
							setTimeout(function() {
								uni.navigateBack({
									delta: 1
								})
							}, 2000);

						}
					}).catch(error => {
						console.log(error)
					})
				} else {
					uni.showToast({
						title: "两次密码不一致",
						icon: "none"
					});
				}
			}
		}
	}
</script>

<style scoped>
	.list {
		padding-top: 40rpx;
	}

	.item {
		width: 100%;
		padding: 30rpx;
		height: 108rpx;
		border-bottom: 2px solid #F5F5F5;
		background: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 32rpx;
		box-sizing: border-box;
	}

	.tips {
		font-size: 24rpx;
		color: #999999;
		padding: 0 30rpx;
		margin-top: 30rpx;
	}

	.onClick {
		position: fixed;
		bottom: calc(20px + var(--window-bottom));
		left: 30rpx;
		width: 690rpx;
		height: 98rpx;
		background-color: #585CF7;
		box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.02);
		border-radius: 49rpx;
		color: #FFFFFF;
		font-size: 32rpx;
		line-height: 98rpx;
		text-align: center;
	}

	.uni-icon {
		font-family: uniicons;
		font-size: 40rpx;
		font-weight: normal;
		font-style: normal;
		width: 28rpx;
		height: 28rpx;
		line-height: 28rpx;
		color: #dcdcdc;
		margin: 0 28rpx
	}

	.uni-eye-active {
		color: #31C6DB;
	}
</style>
<style>
	page {
		background: #F5F5F5;
	}
</style>
